<template>
	<view class="container">
		<view class="main">
            <view class="title">
                {{ itemData.itemName }}
            </view>
            <view class="box_group">
                <view class="small_title">
                    <view class="">
                        <image src="../../static/matter/icon_info.png" mode=""></image>
                        基本信息
                    </view>
                    <image src="../../static/back.png" mode=""></image>
                </view>
                <view class="more_info">
                    <view class="">
                         <view class="">
                            事项实施编码：
                        </view>
                        <text>
                            {{ itemData.code }}
                        </text>
                    </view>
                   
                    <view class="flex">
                        <view class="flex_1">
                            事项类型：<text>{{ itemData.type }}</text>
                        </view>
                        <view class="flex_1">
                            办事对象：<text>{{ itemData.serviceObjectName }}</text>
                        </view>
                    </view>
                    <view class="flex">
                        <view class="flex_1">
                            责任处：<text><u-parse :html="itemData.duty" style="color: #333333;"></u-parse></text>
                        </view>
                        <view class="flex_1">
                            办件类型：<text>{{ itemData.workType }}</text>
                        </view>
                    </view>
                    <view class="">
                        法定办结时限：<text>{{ itemData.statutoryTime }}</text>
                    </view>
                    <view class="">
                        承诺办结时限：<text>{{ itemData.promiseTime }}</text>
                    </view>
                    <view style="margin-top: 50rpx;font-size: 32rpx;font-weight: bold;">
                        <text>咨询途径</text>
                    </view>
                    <block v-for="(item,index) in data7" :key="index">
						<view class="">
						    <view class="">
						        窗口地址：
						    </view>
						    <text>
						        {{ item.WINDOW_ADDRESS }}
						    </text>
						</view>
						<view class="">
						    <view class="">
						        工作时间：
						    </view>
						    <text>
						       {{ item.WINDOW_TIME }}
						    </text>
						</view>
						<view class="">
						    <view class="">
						        电话号码：
						    </view>
						    <text>
						        {{ item.PHONE_NUMBER }}
						    </text>
						</view>
					</block>
                </view>
            </view>
			
            <view class="box_group" @click="$gopage('/pages/bright/file1?itemCode='+itemCode)">
                <view class="small_title">
                    <view class="">
                        <image src="../../static/matter/icon_porcess.png" mode=""></image>
                        办理流程
                    </view>
                    <image src="../../static/back.png" mode=""></image>
                </view>
                <view class="more_info">
                    
                </view>
            </view>
			
            <view class="box_group" @click="$gopage('/pages/bright/file2?itemCode='+itemCode)">
                <view class="small_title">
                    <view class="">
                        <image src="../../static/matter/icon_material.png" mode=""></image>
                        申请材料
                    </view>
                    <image src="../../static/back.png" mode=""></image>
                </view>
                <view class="more_info">
                    
                </view>
            </view>
			
			<view class="box_group" @click="$gopage('/pages/bright/file4?itemCode='+itemCode)">
			    <view class="small_title">
			        <view class="">
			            <image src="../../static/matter/icon_basi.png" mode=""></image>
			            设定依据
			        </view>
			        <image src="../../static/back.png" mode=""></image>
			    </view>
			    <view class="more_info">
			        
			    </view>
			</view>
			
            <view class="box_group" @click="$gopage('/pages/bright/file5?itemCode='+itemCode)">
                <view class="small_title">
                    <view class="">
                        <image src="../../static/matter/icon_judge.png" mode=""></image>
                        受理条件
                    </view>
                    <image src="../../static/back.png" mode=""></image>
                </view>
                <view class="more_info">
                    
                </view>
            </view>
			
			<view class="box_group" @click="$gopage('/pages/bright/file9?itemCode='+itemCode)">
			    <view class="small_title">
			        <view class="">
			            <image src="../../static/matter/icon_money.png" mode=""></image>
			            收费标准及依据
			        </view>
			        <image src="../../static/back.png" mode=""></image>
			    </view>
			    <view class="more_info">
			        
			    </view>
			</view>
			
			<view class="box_group" @click="$gopage('/pages/bright/file6?itemCode='+itemCode)">
			    <view class="small_title">
			        <view class="">
			            <image src="../../static/matter/icon_people.png" mode=""></image>
			            行政相对人权利与义务
			        </view>
			        <image src="../../static/back.png" mode=""></image>
			    </view>
			    <view class="more_info">
			        
			    </view>
			</view>
			
			<view class="box_group" @click="$gopage('/pages/bright/file7?itemCode='+itemCode)">
			    <view class="small_title">
			        <view class="">
			            <image src="../../static/matter/icon_zixun.png" mode=""></image>
			            咨询途径
			        </view>
			        <image src="../../static/back.png" mode=""></image>
			    </view>
			    <view class="more_info">
			    </view>
			</view>
			
			<view class="box_group" @click="$gopage('/pages/bright/file8?itemCode='+itemCode)">
			    <view class="small_title">
			        <view class="">
			            <image src="../../static/matter/icon_jiandu.png" mode=""></image>
			            监督投诉
			        </view>
			        <image src="../../static/back.png" mode=""></image>
			    </view>
			    <view class="more_info">
			    </view>
			</view>
			
			<view class="box_group" @click="$gopage('/pages/bright/file3?itemCode='+itemCode)">
			    <view class="small_title">
			        <view class="">
			            <image src="../../static/matter/icon_problem.png" mode=""></image>
			            常见问题
			        </view>
			        <image src="../../static/back.png" mode=""></image>
			    </view>
			    <view class="more_info">
			    </view>
			</view>
			
        </view>
        <view class="footer">
            <view class="collect" @click="collect">
				<image src="../../static/noCollect.png" v-if="itemData.isCollection == 1"></image>
                <image src="../../static/matter/icon_start.png" v-if="itemData.isCollection == 0"></image>
                <text>收藏</text>
            </view>
            <view class="sureBtn" @click="toTransaction">
                在线办理
            </view>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemCode:'',
				itemData:{},
				data7:[]
			}
		},
		onLoad(option){
			this.itemCode = option.itemCode;
			this.selectItemDetail();
		},
		methods: {
			toTransaction(){
				if(this.itemData.isCanHandle != 1){
					uni.showToast({
						title: this.itemData.isCanHandleMsg || '暂无登录',
						icon: 'none',
						mask:true
					});
					return false
				}
				uni.redirectTo({
					url:"/pages/matter/onlineAdd?itemCode=" + this.itemCode
				})
			},
			collect(){
				if(this.itemData.isCollection == 1){
					this.cancelItemCollection();
				}else{
					this.insertItemCollection();
				}
			},
			insertItemCollection(){
				this.$ajax({
					url: '/api/wwwNews/insertItemCollection',
					method: 'POST',
					needAuth: true,
					data:{
						itemCode:this.itemCode,
						userType: uni.getStorageSync('userType')
					}
				}).then(res => {
					if (res.code == 200) {
						this.$set(this.itemData,'isCollection',1)
						uni.showToast({
							title: '收藏成功',
							icon: 'none',
							mask:true
						});
					}
				})
			},
			cancelItemCollection(){
				this.$ajax({
					url: '/api/wwwNews/cancelItemCollection',
					method: 'POST',
					needAuth: true,
					data:{
						itemCode:this.itemCode,
						userType: uni.getStorageSync('userType')
					}
				}).then(res => {
					if (res.code == 200) {
						this.$set(this.itemData,'isCollection',0)
						uni.showToast({
							title: '取消收藏',
							icon: 'none',
							mask:true
						});
					}
				})
			},
			selectItemDetail(){
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.$ajax({
					url: '/api/wwwBiz/selectItemDetail',
					method: 'POST',
					needAuth: true,
					data:{
						itemCode:this.itemCode,
						userType: uni.getStorageSync('userType')
					}
				}).then(res => {
					if (res.code == 200) {
						this.itemData = res.data.data1;
						this.data7 = res.data.data7;
					}
				}).finally(()=>{
					uni.hideLoading();
				})
			}
		}
	}
</script>

<style scoped lang="less">
    .container{
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }
    .main{
        padding: 88rpx 30rpx 0;
        flex: 1;
        overflow-y: auto;
        .title{
            padding-left: 20rpx;
            margin-top: 40rpx;
            font-size: 44rpx;
            color: #333;
            font-weight: bolder;
        }
        .box_group{
             padding-left: 20rpx;
            .small_title{
                width: 100%;
                margin-top: 30rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                &>view{
                    flex: 1;
                    display: flex;
                    align-items: center;
                    image{
                        width: 40rpx;
                        height: 40rpx;
                        margin-right: 20rpx;
                    }
                    
                }
                &>image{
                    width: 10rpx;
                    height: 18rpx;
                }
            }
            .more_info{
                padding: 30rpx 0 10rpx;
                font-size: 28rpx;
                &>view{
                    margin-bottom: 20rpx;
                }
                view{
                    color: #999;
                }
                text{
                    color: #333;
                }
            }
        }
    }
    .flex{
        display: flex;
        justify-content: space-between;
    }
    .flex_1{
        flex: 1;
    }
    .footer{
        height: 98rpx;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 32rpx;
        .collect{
            width: 240rpx;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #5b96ff;
            border-top: 1rpx solid #5b96ff;
            height: 100%;
            image{
                width: 26rpx;
                height: 26rpx;
                margin-right: 10rpx;
            }
        }
        .sureBtn{
            flex: 1;
            height: 100%;
            background-color: #5b96ff;
            border-top: 1rpx solid #5b96ff;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>
